<template>
	<view class="container">
		<view class="nav">
			<view class="score">
				<u-icon name="../../../static/shop/jifen.png" :size='30'></u-icon>
				<text>积分：{{score}}</text>
			</view>
			<view class="icon_score">
				<u-icon name="../../../static/shop/yiwen.png" :size='30'></u-icon>
				<text>疑问反馈?</text>
			</view>
		</view>
		<!-- 图片 -->
		<u-image src="../../../static/shop/wtu.jpeg" width="100%" height="300rpx" :lazy-load="true">
		</u-image>
		<!--  -->
		<view class="jingxuan">
			<text>精选推荐 POPULAR</text>
		</view>
		<!-- 列表 -->
		<view class="list">
			<u-grid :col="2" hover-class="none">
				<u-grid-item style="border:#dee7f6  10rpx solid;">
					<u-icon name="../../../static/shop/touxiang.png" :size="size">
					</u-icon>
					<view class="grid-text"><text>更新头像</text><text class="grid-text-l">10积分</text></view>
				</u-grid-item>
				<u-grid-item style="border:#dee7f6  10rpx solid;">
					<u-icon name="../../../static/shop/qiehuan.png" :size="size"></u-icon>
					<view class="grid-text"><text>切换座位</text><text class="grid-text-l">10积分</text></view>
				</u-grid-item>
				<u-grid-item style="border:#dee7f6  10rpx solid;">
					<u-icon name="../../../static/shop/jiechu.png" :size="size"></u-icon>
					<view class="grid-text"><text>解除黑名单</text><text class="grid-text-l">10积分</text></view>
				</u-grid-item>
				<u-grid-item style="border:#dee7f6  10rpx solid;">
					<u-icon name="../../../static/shop/xiaochu.png" :size="size"></u-icon>
					<view class="grid-text"><text>消除违规记录</text><text class="grid-text-l">10积分</text></view>
				</u-grid-item style="border:#dee7f6  10rpx solid;">
				<u-grid-item style="border:#dee7f6  10rpx solid;">
					<u-icon name="../../../static/shop/tuichi15.png" :size="size"></u-icon>
					<view class="grid-text"><text>推迟签到(15分钟)</text><text class="grid-text-l">10积分</text></view>
				</u-grid-item>
				<u-grid-item style="border:#dee7f6  10rpx solid;">
					<u-icon name="../../../static/shop/tuichi30.png" :size="size"></u-icon>
					<view class="grid-text"><text>推迟签到(30分钟)</text><text class="grid-text-l">10积分</text></view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 得分
				score: 585,
				size: '150'
			};
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		width: 100%;
		background-color: #dee7f6;

		.nav {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.score,
			.icon_score {
				display: flex;
				justify-content: center;
				align-items: center;

				.u-icon {
					margin-right: 10rpx;
				}
			}
		}

		// 
		.jingxuan {
			height: 60rpx;
			width: 100%;
			display: flex;
			align-items: center;
			margin-left: 50rpx;
		}

		.list {
			.u-grid-item {

				.u-icon {
					margin-bottom: 40rpx;

				}

				.grid-text {

					.grid-text-l {
						color: #94b9d8;
						margin-left: 20rpx;
					}

				}
			}
		}
	}
</style>
